<template>
  <div class="app-container">

    <el-card class="box-card d1">
      <p style="font-size: 14px"><a @click="handleCancel"><i class="el-icon-back" style="width: 20px"></i>返回</a></p>
      <h4><i class="el-icon-paperclip"></i> 基本信息</h4>
      <el-row>
        <el-col :span="24">
          <el-form label-position="labelPosition"  ref="formPatient" :model="formPatient" :rules="rulesPatient" label-width="80px"  >
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名" prop="patientName">
                  <el-input v-model="formPatient.patientName" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="formPatient.gender" placeholder="请选择性别" clearable>
                    <el-option
                      v-for="dict in dict.type.his_doctor_sex"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="formPatient.age" placeholder="请输入患者年龄" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="门诊号" prop="outpatient">
                  <el-input v-model="formPatient.outpatient" placeholder="请输入门诊号/住院号" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="检测机构" prop="unit">
                  <el-input v-model="formPatient.unit" placeholder="请输入检测机构" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="血片编号" prop="sliceNo">
                  <el-input v-model="formPatient.sliceNo" placeholder="请输入血片编号" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="常住地址" prop="address">
                  <el-input v-model="formPatient.address" placeholder="请输入常住地址" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="电话/手机" prop="tel">
                  <el-input v-model="formPatient.tel" placeholder="请输入患者电话" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="报告单ID号" prop="tel">
                  <el-input v-model="formPatient.serialNo" placeholder="请输入报告单ID号" />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="formPatient.remark" type="textarea" placeholder="请输入备注" />
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="op-container" style="float: right">
          <el-button @click="handleCancel">返回</el-button>
          <el-button type="primary" :loading="btnLoading" @click="submitForm">更新</el-button>
        </div>
      </el-row>
    </el-card>

    <el-card class="box-card d2">
     <h4 style="margin-bottom: 10px"><i class="el-icon-document"></i> 检验指标</h4>
      <el-row>
        <div class="op-container" style="float: right">
          <el-button :plain="true" type="primary" size="mini" @click="loadPdf">报告预览</el-button>
        </div>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form label-position="labelPosition"  ref="formAttribute" :model="formAttribute" :rules="rulesAttribute" label-width="80px"  >
            <el-row>
              <el-col :span="6">
                <el-form-item label="丙二醛" prop="mda">
                  <el-tooltip class="item" effect="light" content="单位：nmol/ml" placement="right">
                    <el-input v-model="formAttribute.mda" placeholder="" />
                  </el-tooltip>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="样本类型" prop="sampleType">
                  <el-select v-model="formPatient.sampleType" placeholder="请选择样本类型" clearable>
                    <el-option
                      v-for="dict in dict.type.sample_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-divider content-position="left"></el-divider>
      <el-row>
        <el-col :span="24">
          <el-form label-position="labelPosition"  ref="formRisk" :model="formRisk" :rules="rulesRisk" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="送检医生" prop="department">
                  <el-input v-model="formRisk.docts" placeholder="请输入送检医生" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="送检科室" prop="department">
                  <el-input v-model="formRisk.department" placeholder="请输入送检科室" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="检验人" prop="inspector">
                  <el-input v-model="formRisk.inspector" placeholder="请输入检验人" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="报告人" prop="report">
                  <el-input v-model="formRisk.report" placeholder="请输入报告人" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="审核人" prop="reviewer">
                  <el-input v-model="formRisk.reviewer" placeholder="请输入审核人" />
                </el-form-item>
              </el-col>

              <el-col :span="6" class="date_pick">
                <el-form-item label="收样时间" prop="receiveTime">
                  <el-date-picker clearable v-model="formRisk.receiveTime" type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  placeholder="请选择收样时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="date_pick">
                <el-form-item label="检测时间" prop="ctime">
                  <el-date-picker clearable v-model="formRisk.ctime" type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  placeholder="请选则检测时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6" class="date_pick">
                <el-form-item label="报告时间" prop="reportTime">
                  <el-date-picker clearable v-model="formRisk.reportTime" type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  placeholder="请选则报告时间">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="op-container" style="float: right">
          <el-button @click="handleCancel">返回</el-button>
          <el-button type="primary" :loading="btnLoading" @click="submitForm">更新</el-button>
        </div>
      </el-row>
    </el-card>

    <div class="op-container">
      <el-button @click="handleCancel">返回</el-button>
      <el-button type="primary" :loading="btnLoading" @click="submitForm">更新</el-button>
    </div>

  </div>
</template>

<style>
.fixed-width .el-button--mini {
  width: 60px !important;
}
.d1 .el-input {
  width: 79%;
}
.d1 .el-textarea__inner{
  width: 79% ;
}
.d1 .el-form-item__label {
  width: 102px !important;
}
.d1 .el-form-item__content{
  margin-left: 102px !important;
}

.d2 .el-input {
  width: 100%;
}
.d2 .el-textarea__inner{
  width: 100% ;
}
.d2 .el-form-item__label {
  width: 126px !important;
}
.d2 .el-form-item__content{
  margin-left: 126px !important;
}
.d2 .el-input__inner{
  padding: 0 8px !important;
}
.d2 .date_pick .el-input__inner{
  padding-left: 36px !important;
}
.d2 .el-card__body {
  padding-bottom: 10px !important;
}
.d3 .text_area .el-form-item__content{
  margin-left: 0 !important;
}
/*.d3 .el-textarea__inner{
  height: 76px !important;
}*/

.d4 .el-form-item {
  margin-bottom: 10px !important;
}
/*.d4 .el-textarea__inner{
  height: 96px !important;
}*/
.d4 .el-form-item__content{
  margin-left: 0 !important;
}

.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
.d1 .el-card__body {
  padding: 0 20px 20px 20px !important;
}
</style>

<script>

import { updatePatient, getPatient, addPatient } from '@/api/his/mda'
import { updateAttribute, getAttribute, addAttribute } from '@/api/his/attribute'
import { addScreening, updateScreening, delScreening} from '@/api/his/screening'
import { getToken } from "@/utils/auth";
import {tansParams } from '@/utils/ruoyi'
import axios from 'axios'

export default  {
  name: 'MdaEdit',
  dicts: [
    'his_doctor_sex',
    'sample_type',
  ],
  data() {
    return {
      // 表单参数
      formPatient: {},
      formAttribute:{
        patientId:0,
        mda:'',
      },
      formRisk:{},
      // 表单校验
      rulesPatient: {
        patientName: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        idCard: [
          { required: true, message: "身份证号不能为空", trigger: "blur" }
        ],
        gender: [
          { required: false, message: "性别不能为空", trigger: "change" }
        ],

        tel: [
          { required: false, message: "电话手机号不能为空", trigger: "blur" }
        ],
      },
      rulesAttribute:{},
      rulesRisk:{
        inspector: [
          { required: false, message: "检验人不能为空", trigger: "blur" }
        ],
        reviewer: [
          { required: false, message: "报告人不能为空", trigger: "blur" }
        ],
        createBy: [
          { required: false, message: "审核人不能为空", trigger: "blur" }
        ],

      },
      btnLoading: false,
      pathUrl:'/plugins/pdfjs/web/viewer.html',
      doc:{
        open: false,
        title: '预览'
      }
    }
  },
  created() {
    this.init();
  },

  methods: {
    async loadPdf() {
      if(this.formAttribute.mda==""){
        this.$modal.msgWarning("丙二醛没有值")
        return;
      }
      const loading = this.$loading({
        //lock: true,
        text: '报告生成中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.2)'
      });

      const baseURL = process.env.VUE_APP_BASE_API;
      const api ='/his/patient/getReport';
      var query = {patient: JSON.stringify(this.formPatient) ,mda: this.formAttribute.mda};
      var url = baseURL + api + '?' + tansParams(query);
      //console.log('patient',query)
      axios({
        method: 'get',
        url: url,
        responseType: 'blob',
        params: {},
        headers: { Authorization: "Bearer " + getToken() },
      }).then(res =>{
          loading.close();
          const blob = new Blob([res.data], {type: 'application/pdf'})
          let href = URL.createObjectURL(blob)
          window.open(href)
        }
      )
    },


    init(row) {
      const id = this.$route.params && this.$route.params.id;

      getPatient(id).then(response => {
        this.formPatient = this.formRisk = this.formAdvise = response.data;

        //获取筛查参数指标
        getAttribute(id).then(response => {
          if(response.data != undefined){
            this.formAttribute = response.data;
            this.isExit = true;
          }else{
            this.formAttribute.patientId = id;
          }
        });
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.btnLoading = true;
      let formPatient=new Promise((resolve,reject)=>{
        this.$refs["formPatient"].validate((valid)=>{
          if(valid){
            resolve();
          }else{
            this.btnLoading = false;
            return false;
          }

        });
      });
      let formAttribute=new Promise((resolve,reject)=>{
        this.$refs["formAttribute"].validate((valid)=>{
          if(valid){
            resolve();
          }else{
            this.btnLoading = false;
            return false;
          }
        });
      });
      let formRisk=new Promise((resolve,reject)=>{
        this.$refs["formRisk"].validate((valid)=>{
          if(valid){
            resolve();
          }else{
            this.btnLoading = false;
            return false;
          }
        });
      });

      Promise.all([formPatient,formAttribute,formRisk]).then(()=>{
        //更新患者基本信息
        if (this.formPatient.id != null) {
          var date = new Date();
          this.formPatient.remark = this.formAdvise.remark;
          this.formPatient.riskModel = this.formRisk.riskModel;
          this.formPatient.collector = this.formRisk.collector;
          this.formPatient.reviewer = this.formRisk.reviewer;
          this.formPatient.createBy = this.formRisk.createBy;
          if(this.formPatient.ctime!=null && this.formPatient.ctime!=undefined && this.formPatient.ctime!=''){
            this.formPatient.ctime = this.formPatient.ctime+" 00:00:00";
          }
         if(this.formPatient.receiveTime!=null && this.formPatient.receiveTime!=undefined && this.formPatient.receiveTime!=''){
           this.formPatient.receiveTime = this.formPatient.receiveTime+" 00:00:00";
         }
         if(this.formPatient.reportTime!=null && this.formPatient.reportTime!=undefined && this.formPatient.reportTime!=''){
           this.formPatient.reportTime = this.formPatient.reportTime+" 00:00:00";
         }


          updatePatient(this.formPatient).then(response => {
            //this.$router.push({ path: '/reg_treat/patient'})
          });
        } else {
          addPatient(this.formPatient).then(response => {
            //this.$router.push({ path: '/reg_treat/patient' })
          });
        }

        //更新患者疾病指标
        if (this.isExit) {
          updateAttribute(this.formAttribute).then(response => {
            //this.$router.push({ path: '/reg_treat/patient'})
          });
        } else {
          addAttribute(this.formAttribute).then(response => {
            //this.$router.push({ path: '/reg_treat/patient' })
          });
        }

        this.$modal.msgSuccess("更新成功");
        this.$router.push({ path: '/mda'})
      })

    },

    handlePatientResult(row,type) {
      this.dicts_state = type
      this.formResult = Object.assign({}, row)
      this.resultVisiable = true
    },

    handleDelete(row){
      const id = row.id || this.ids;
      this.$modal.confirm('是否确认删除"' + row.screeningItem + '"的数据项？').then(function() {
        return delScreening(id);
      }).then(() => {
        this.init();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});

    },

    handleResultEdit() {
      this.$refs["formResult"].validate(valid => {
        if (valid) {
          this.formResult.addTime = Date.now();
          if (this.formResult.id != null) {
            updateScreening(this.formResult).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.resultVisiable = false;
              this.init();
            });
          } else {
            this.formResult.patientId = this.queryKsParams.patientId = this.queryLnParams.patientId;
            addScreening(this.formResult).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.resultVisiable = false;
              this.init();
            });
          }
        }
      });
    },

    handleCancel: function() {
      this.$router.push({ path: '/mda'})
    },

  }
}
</script>
